/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
var plantar = false;
function procesar_paso2() {
    console.log("aqui");
    //validaciones
    var form_titulo = "" + $("#form_titulo").val();
    if (form_titulo.length == 0) {
        console.log("Aqui1");
        $("#form_titulo").css("borderColor", "red");
        $("#form_titulo").focus();
        return false;
    } else {
        $("#form_titulo").css("borderColor", "gray");
    }

    var form_rubro = "" + $("#form_rubro").val();
    if (form_rubro.length == 0) {
        console.log("Aqui2");
        $("#form_rubro").css("borderColor", "red");
        $("#form_rubro").focus();
        return;
    } else {
        $("#form_rubro").css("borderColor", "gray");
    }


    var form_url = "" + $("#form_url").val();
    if (form_url.length == 0) {
        console.log("Aqui3");
        $("#form_url").css("borderColor", "red");
        $("#form_url").focus();
        return false;
    } else {
        $("#form_url").css("borderColor", "gray");
    }

    var form_comentario = "" + $("#form_comentario").val();
    if (form_comentario.length == 0) {
        console.log("Aqui4");
        $("#form_comentario").css("borderColor", "red");
        $("#form_comentario").focus();
        return false;
    } else {
        $("#form_comentario").css("borderColor", "gray");
    }

    var form_image = "" + $("#form_image").val();
    if (form_image.length == 0) {
        console.log("Aqui5");
        alert("Debe seleccionar un archivo de imagen valida.");
        return false;
    }

    $("#mform").submit();
    //se submeteara
}

function procesar_paso3() {
    document.getElementById("compra_paso_3").style.display = "none";
    document.getElementById("compra_paso_4").style.display = "table";
    document.getElementById("img_paso3").src = "img/compra/cm3.png";
    document.getElementById("img_paso4").src = "img/compra/cm4_press.png";
}

function mousein(event, T) {
    if (!plantar) {
        var mtop = 91;
        var mleft = document.getElementById("map_main0").getBoundingClientRect().left;
        var x = (parseInt(T.coords.split(",")[0]) + mleft);
        var y = (parseInt(T.coords.split(",")[1]) + mtop);
        $("#mo").css("left", x + "px");
        $("#mo").css("top", y + "px");
    }
}

function mouseout(event, T) {
}


/*if (T == null | T == undefined | T == '') {
 console.log("Cancelando la ediciÃ³n");
 mouseclickX(null, null);
 return;
 }
 var R = document.getElementById("map_main0");
 var aux = parseInt((R.getBoundingClientRect().left));
 var x = parseInt2(T.style.left) - aux;
 var y = parseInt2(T.style.top) - 91;
 var w = parseInt2(T.style.width);
 var h = parseInt2(T.style.height);
 console.log("[" + x + "," + y + "]");
 //accion plantar
 if (plantar) {
 //desplantar
 document.removeChild(document.getElementById("base"));
 T.style.dispaly = "none"; //Nuevo elemento agregado
 $("#venta_pro").css("display", "none");
 } else {
 plantar = true;
 $("#mo").css("display", "none");
 T.style.dispaly = "block"; //Nuevo elemento agregado
 //crear_ancla
 var ele = document.createElement("DIV");
 ele.setAttribute("id", "base");
 ele.setAttribute("style", "width: 10px;height: 10px;display: block;position: absolute;background-color: #666666;opacity: 0.9;top:" + (y + 91) + "px;left:" + (x + aux) + "px;");
 ele.setAttribute("class", "custom");
 document.body.appendChild(ele);
 crearborde(x, y, w, h, aux);
 }*/


function remover_xhj() {
    try {
        var lista = document.getElementsByClassName("xhj");
        var lista_size = document.getElementsByClassName("xhj").length;
//                    console.log("tamaÃ±o:" + lista_size);
        for (var i = (lista_size - 1); i >= 0; i--) {
            var ele = lista[i];
//                        console.log("ele:" + ele);
            var parent = ele.parentNode;
            parent.removeChild(ele);
        }
    } catch (e) {
        console.log("Error:" + e);
    }
}

function crearborde(x, y, w, h, aux) {
    var ele = null;
    var nW = 0;
    var nH = 0;
    var le = [];
    var ki = 1;
//                var ciclox = [];
//                var cicloy = [];
    for (var i = 0; i < 3; i++) {
        var ptX = 0;
        var ptY = 0;
        if (i == 0) {
            ptX = x - 10;
            nW = 10;
        } else if (i == 1) {
            ptX = x;
            nW = w;
        } else if (i == 2) {
            ptX = x + w;
            nW = 10;
        }

        for (var o = 0; o < 3; o++) {
            if (o == 0) {
                ptY = y - 10;
                nH = 10;
            } else if (o == 1) {
                ptY = y;
                nH = h;
            } else if (o == 2) {
                ptY = y + h;
                nH = 10;
            }

//                        console.log("[" + ptX + ":" + ptY + "]");
            if (ptX < 0 | (ptX + (i == 2 ? 10 : 0)) > 1000 | ptY < 0 | (ptY + (o == 2 ? 10 : 0)) > 1000 | (ptX == x & ptY == y)) {
//No pintar
//                            console.log("\tEsta en los extremos" + "[" + ptX + ":" + ptY + "]");
            } else {
//                            evaluar para pintar
//                            console.log("Es valido" + "[" + ptX + ":" + ptY + "]");
                var p = new punto(ptX, ptY, nW, nH);
                p.setKi(ki);
//                            console.log("elemento creado:" + p.ki);
                le[le.length] = p;
            }
//evaluarpunto
            ki++;
        }
    }

//Todas las areas validas a analizar
    var ta = document.getElementsByClassName("pixs");
    var LadoA = getminY(le);
    var LadoC = getmaxY(le);
    var LadoD = getminX(le);
    var LadoB = getmaxX(le);
//                console.log("minimo en Y: " + LadoA);
//                console.log("maximo en Y: " + LadoC);
//                console.log("minimo en X: " + LadoD);
//                console.log("maximo en X: " + LadoB);
    var shapes_LadoA = [];
    var shapes_LadoB = [];
    var shapes_LadoC = [];
    var shapes_LadoD = [];
    var shapes = [];
    for (var i = 0; i < ta.length; i++) {
        var shape = ta[i].coords.split(",");
//                    console.log("=================SHAPE [" + (i + 1) + "][" + ta[i].title + "]====================");
        //Evaluacion del lado superior o LadoA
//                    console.log("#ta[" + i + "]  ==>evalunado Lado A  ((" + shape[1] + " < " + LadoA + ") & (" + (LadoA + 10) + " == " + shape[3] + ")) ==>" + ((shape[1] < LadoA) & ((LadoA + 10) == shape[3])));
//                    if (shape[1] < LadoA & LadoA < shape[3]) {
        if ((shape[1] < LadoA) & ((LadoA + 10) == shape[3])) {

//                        console.log("((shape[0] < LadoD & LadoD < shape[2]) | (LadoB > shape[0] & LadoB < shape[2]) | ((shape[0] >= LadoD) & (shape[2] <= LadoB)) )::" + ta[i].title);
//                        console.log("(((" + shape[0] + " < " + LadoD + ") & (" + LadoD + " < " + shape[2] + ") ) | ( (" + LadoB + ">" + shape[0] + ")  &  (" + LadoB + " < " + shape[2] + ")  ) | ((" + shape[0] + " >=" + LadoD + ") & (" + shape[2] + "<=" + LadoB + ")) )");
//                        console.log("((" + (shape[0] < LadoD) + " & " + (LadoD < shape[2]) + ") | (" + (LadoB > shape[0]) + "& " + (LadoB < shape[2]) + ") | (" + (shape[0] >= LadoD) + " & " + (shape[2] <= LadoB) + "))");
            if ((shape[0] < LadoD & LadoD < shape[2]) | (LadoB > shape[0] & LadoB < shape[2]) | ((shape[0] >= LadoD) & (shape[2] <= LadoB))) {
//                        if ((shape[2] < LadoD) | (LadoB > shape[0])) {
//                            console.log("LadoA:este shape es candidato... LadoA: -ste:" + ta[i].title);
//                            console.log("Shape elejido:" + ta[i].title + "--------------------------->");
                agregar_shape(shapes, ta[i]);
            }
        }

//Evaluacion del lado inferior o LadoC
//                    console.log("#ta[" + i + "]  ==>evalunado Lado C ((" + shape[1] + " == " + (LadoC - 10) + ") & " + LadoC + " < " + shape[3] + ")==>" + ((shape[1] == (LadoC - 10)) & LadoC < shape[3]));
        if ((shape[1] == (LadoC - 10)) & LadoC < shape[3]) {
            if ((shape[0] < LadoD & LadoD < shape[2]) | (LadoB > shape[0] & LadoB < shape[2]) | ((shape[0] >= LadoD) & (shape[2] <= LadoB))) {
//                            console.log("Este shape es candidato... LadoC: -ste:" + ta[i].title);
//                        console.log("Shape elejido:" + ta[i].title + "--------------------------->");
                agregar_shape(shapes, ta[i]);
            }
        }

//Evaluacion del lado derecho o LadoB
//                    console.log("#ta[" + i + "]  ==>evalunado Lado B ((" + shape[0] + "==" + (LadoB - 10) + ") & " + LadoB + " < " + shape[2] + ") ==>" + ((shape[0] == LadoB - 10) & LadoB < shape[2]));
//                    if (shape[0] < LadoB & LadoB < shape[2]) {
        if ((shape[0] == LadoB - 10) & LadoB < shape[2]) {
//                        console.log("Este shape es candidato... LadoB: -ste:" + ta[i].title);
            if ((shape[1] < LadoA & LadoA < shape[3]) | (shape[1] < LadoC & LadoC < shape[3]) | ((shape[1] >= LadoA) & (shape[3] <= LadoC))) {
//                            console.log("Este shape es candidato... LadoB: -ste:" + ta[i].title);
                agregar_shape(shapes, ta[i]);
//                            shapes_LadoB[shapes_LadoB.length] = ta[i];
            }
        }

//Evaluacion del lado izquierdo o LadoD
//                    console.log("#ta[" + i + "]  ==>evalunado Lado D  (" + shape[0] + " < " + LadoD + " & (( " + (LadoD + 10) + ") == " + shape[2] + "))==>" + (shape[0] < LadoD & ((LadoD + 10) == shape[2])));
//                    if (shape[0] < LadoD & LadoD < shape[2]) {
        if (shape[0] < LadoD & ((LadoD + 10) == shape[2])) {
//                        console.log("Este shape es candidato... LadoD: -ste:" + ta[i].title);
//                        console.log("((shape[1] < LadoA & LadoA < shape[3]) | (shape[1] < LadoC & LadoC < shape[3]) | ((shape[1] >= LadoC) & (shape[3] <= LadoA)))::" + ta[i].title);
//                        console.log("((" + shape[1] + " < " + LadoA + "& " + LadoA + " < " + shape[3] + ") | (" + shape[1] + " < " + LadoC + " & " + LadoC + " < " + shape[3] + ") | ((" + shape[1] + " >= " + LadoC + ") & (" + shape[3] + " <= " + LadoA + ")))");
            if ((shape[1] < LadoA & LadoA < shape[3]) | (shape[1] < LadoC & LadoC < shape[3]) | ((shape[1] >= LadoA) & (shape[3] <= LadoC))) {
//                            console.log("Este shape es candidato... LadoD: -ste:" + ta[i].title);
                agregar_shape(shapes, ta[i]);
//                            shapes_LadoD[shapes_LadoD.length] = ta[i];
            }
        }
    }
//                console.log("\n\n" + shapes.length);
    for (var o = 0; o < shapes.length; o++) {
        var Tx1 = shapes[o].coords.split(",")[0];
        var Tx2 = shapes[o].coords.split(",")[2];
        var Ty1 = shapes[o].coords.split(",")[1];
        var Ty2 = shapes[o].coords.split(",")[3];
//                    console.log("SHAPE[" + o + "]EValuando los cuadrados de extension :" + le.length + " en total minX:" + Tx1 + ", maxX:" + Tx2 + ", minY:" + Ty1 + ",maxY:" + Ty2);
        for (var i = 0; i < le.length; i++) {
            var p = le[i];
//                    console.log("\tevaluando los cuadrado[" + i + "] ==>((" + p.x + " >= " + Tx1 + " & (" + p.x + " + " + p.w + ") <= " + Tx2 + ") & (" + p.y + " >= " + Ty1 + " & (" + p.y + " + " + p.h + ") <= " + Ty2 + "))");
//                        console.log("(((" + p.x + " < " + Tx1 + " & " + Tx1 + " < (" + p.x + " + " + p.w + ")) | (" + p.x + " < " + Tx2 + " & " + Tx2 + " < (" + p.x + "+ " + p.w + "))) & (" + (p.y + p.h) + " == " + Ty2 + "))");
//                        console.log("SHAPE[" + o + "]valor de p[" + p + "]");
            if (p != "") {
                if (p.inside(Tx1, Ty1, Tx2, Ty2)) {
//                                console.log("SHAPE[" + o + "]Esta dentro de shape! o lo contiene!");
                    le[i] = "";
                } else {
//                                console.log("SHAPE[" + o + "]No esta dentro de algun shape por lo tanto ...");
                    if (((p.x < Tx1 & Tx1 < (p.x + p.w)) | (p.x < Tx2 & Tx2 < (p.x + p.w))) & ((p.y + p.h) == Ty2)) {
//se anularan los datos del ala superios
//                                    console.log("\t Eliminando cuadrado de extension - Modo Lado superior");
                        le[i] = "";
                    } else if (((p.x < Tx1 & Tx1 < (p.x + p.w)) | (p.x < Tx2 & Tx2 < (p.x + p.w))) & ((p.y) == Ty1)) {
//se anularan los datos del ala superios
//                                    console.log("\t Eliminando cuadrado de extension - Modo Lado inferior");
                        le[i] = "";
                    } else if (((p.y < Ty1 & Ty1 < (p.y + p.h)) | (p.y < Ty2 & Ty2 < (p.y + p.h))) & (p.x == Tx1)) {
//se anularan los datos del ala superios
//                                    console.log("\t Eliminando cuadrado de extension - Modo costado derecho");
                        le[i] = "";
                    } else if (((p.y < Ty1 & Ty1 < (p.y + p.h)) | (p.y < Ty2 & Ty2 < (p.y + p.h))) & ((p.x + p.w) == Tx2)) {
//se anularan los datos del ala superios
//                                    console.log("\t Eliminando cuadrado de extension - Modo costado izquierdo");
                        le[i] = "";
                    }

                }
            }
        }
//                    console.log("Fin del ciclo");
    }
//                console.log("evalando antes de pintar los cuadrados");
//primero evaluacion del elemento [2]
//                console.log("evaluando el 2:" + get(2, le));
    if (get(2, le) == false) {
        set(1, le);
        set(3, le);
    }
//                console.log("evaluando el 8:" + get(8, le));
    if (get(8, le) == false) {
        set(7, le);
        set(9, le);
    }
//                console.log("evaluando el 4:" + get(4, le));
    if (get(4, le) == false) {
        set(1, le);
        set(7, le);
    }
//                console.log("evaluando el 6:" + get(6, le));
    if (get(6, le) == false) {
        set(3, le);
        set(9, le);
    }

//                console.log("pintando.............." + le.length + "cuadrados");
    var maxPY = 0;
    var maxPX = 0;
    var minPX = 200000;
    var suPH = 0;
    var suPW = 0;
    for (var i = 0; i < le.length; i++) {
//                    console.log("evalucion antes d epintar..[" + i + "]::" + le[i]);
        var p = le[i];
        if (p != null) {
            ele = document.createElement("DIV");
            ele.setAttribute("id", "base" + i + "_" + o);
            ele.setAttribute("class", "xhj custom");
            if (maxPY < (p.y + 91)) {
                maxPY = (p.y + 91);
                suPH = p.h;
            }
            if (maxPX < (p.x + aux)) {
                maxPX = (p.x + aux);
                suPW = p.w;
            }
            if (minPX > p.x) {
                minPX = p.x;
            }
            ele.setAttribute("style", "width: " + p.w + "px;height: " + p.h + "px;display: block;position: absolute;background-color: #666666;opacity:0.4;top:" + (p.y + 91) + "px;left:" + (p.x + aux) + "px;");
            ele.setAttribute("onmouseover", "mousein2(event, this)");
            ele.setAttribute("onmouseout", "mouseout2(event, this)");
            ele.setAttribute("onclick", "mouseclick2(event, this)");
            document.body.appendChild(ele);
        }
    }

    maxPY = maxPY + suPH;
    if (minPX + 240 > 1000) {
        $("#venta_pro").css("left", (maxPX + suPW - 240) + "px");
    } else {
        $("#venta_pro").css("left", (minPX + aux) + "px");
    }

    $("#venta_pro").css("top", maxPY + "px");
    $("#venta_pro").css("display", "block");
}

function get(ki, le) {
    var r = false;
    for (var i = 0; i < le.length; i++) {
        var t = le[i];
        if (t != "") {
            if (t.ki == ki) {
                r = le[i];
            }
        }
    }
    return r;
}

function set(ki, le) {
//                var r = false;
    for (var i = 0; i < le.length; i++) {
        var t = le[i];
        if (t != "") {
            if (t.ki == ki) {
//                            r = le[i];
//                            console.log("Elemento eliminado :" + le[i].ki);
                le[i] = "";
            }
        }
    }
//                return r;
}

function agregar_shape(lista, item) {
    if (lista.length > 1) {

        for (var i = 0; i < lista.length; i++) {
            if (lista[i].title == item.title) {

            } else {
                lista[lista.length] = item;
                break;
            }
        }
    } else {
        lista[lista.length] = item;
    }
}

function getminY(le) {
    var minY = 0;
    for (var i = 0; i < le.length; i++) {
        var p = le[i];
        if (i == 0) {
            minY = p.y;
        }
        if (p.y < minY) {
            minY = p.y;
        }
    }
    return minY;
}

function getmaxX(le) {
    var maxX = 0;
    for (var i = 0; i < le.length; i++) {
        var p = le[i];
        if (i == 0) {
            maxX = p.x;
        }
        if ((p.x + p.w) > maxX) {
            maxX = (p.x + p.w);
        }
    }
    return maxX;
}

function getmaxY(le) {
    var maxY = 0;
    for (var i = 0; i < le.length; i++) {
        var p = le[i];
        if (i == 0) {
            maxY = le[i].y;
        }
        if ((p.y + p.h) > maxY) {
            maxY = (p.y + p.h);
        }
    }
    return maxY;
}

function getminX(le) {
    var minX = 0;
    for (var i = 0; i < le.length; i++) {
        var p = le[i];
        if (i == 0) {
            minX = p.x;
        }
        if (p.x < minX) {
            minX = p.y;
        }
    }
    return minX;
}

function mouseclickX(event, T) {
//agrandar seleccion
    $("#mo").css("display", "block");
    $("#venta_pro").css("display", "none");
    remover_xhj();
    document.body.removeChild(document.getElementById("base"));
    plantar = false;
}

function mousein2(event, T) {
//    T.style.backgroundColor = "rgba(178,178,178,0.7)";
    T.style.backgroundColor = "#666666";
    T.style.opacity = "0.6";
}

function mouseout2(event, T) {
//    T.style.backgroundColor = "rgba(178,178,178,0.5)";
    T.style.backgroundColor = "#666666";
    T.style.opacity = "0.4";
}

//agrandar seleccion
function mouseclick2(event, T) {
//                console.log("Agrandando");
    var aux = parseInt((document.getElementById("map_main0").getBoundingClientRect().left));
    var base = document.getElementById("base");
    var x = parseInt2(base.style.left) - aux;
    var y = parseInt2(base.style.top) - 91;
    var w = parseInt2(base.style.width);
    var h = parseInt2(base.style.height);
//                console.log("de [x:" + x + "][y:" + y + "][w:" + w + "][h:" + h + "]");
//var aux = parseInt((document.getElementById("map_main0").getBoundingClientRect().left));
    var xP = parseInt2(T.style.left) - aux;
    var yP = parseInt2(T.style.top) - 91;
//                console.log("Datos del punto a agregar x:" + xP + ", y:" + yP + " con w:" + (parseInt2(T.style.width)) + ", h:" + parseInt2(T.style.height));
    //Evaluando punto A mi bloque rojo
    var pA = new punto(x, y);
    var pB = new punto(x + w, y);
    var pC = new punto(x, y + h);
    var pD = new punto(x + w, y + h);
//                console.log("pA:" + pA.toString() + " - " + "pB:" + pB.toString() + " - " + "pC:" + pC.toString() + " - " + "pD:" + pD.toString());
    //--------------------------------------------------------------------------
    var p2A = new punto(xP, yP);
//                var p2B = new punto(xP + 10, yP);
//                var p2C = new punto(xP, yP + 10);
//                var p2D = new punto(xP + 10, yP + 10);
    var p2B = new punto((xP + parseInt2(T.style.width)), yP);
//                var p2C = new punto(xP, yP + h);
    var p2C = new punto(xP, yP + parseInt2(T.style.height));
//                var p2D = new punto(xP + w, yP + h);
    var p2D = new punto((xP + parseInt2(T.style.width)), (yP + parseInt2(T.style.height)));
//                console.log("p2A:" + p2A.toString() + " - " + "p2B:" + p2B.toString() + " - " + "p2C:" + p2C.toString() + " - " + "p2D:" + p2D.toString());
    //--------------------------------------------------------------------------
    var A = false;
    var B = false;
    var C = false;
    var D = false;
//                console.log("============== A =============");
    if (pA.eval(p2A) | pA.eval(p2B) | pA.eval(p2C) | pA.eval(p2D)) {
        A = true;
    }
//                console.log("============== B =============");
    if (pB.eval(p2A) | pB.eval(p2B) | pB.eval(p2C) | pB.eval(p2D)) {
        B = true;
    }
//                console.log("============== C =============");
    if (pC.eval(p2A) | pC.eval(p2B) | pC.eval(p2C) | pC.eval(p2D)) {
        C = true;
    }
//                console.log("============== D =============");
    if (pD.eval(p2A) | pD.eval(p2B) | pD.eval(p2C) | pD.eval(p2D)) {
        D = true;
    }
//                console.log("[A:" + A + "][B:" + B + "][C:" + C + "][D:" + D + "]");
    if (A == true & B == false & C == false & D == false) {
//esquina superior izquierda
//                    console.log("esquina superior izquierda");
//evaluando dos lados
        var s1 = new punto(pA.x, p2A.y, w, 10);
        var s2 = new punto(p2A.x, pA.y, 10, h);
        if (isfree(s1) & isfree(s2)) {
//acrecentar el base
            base.style.left = (x - 10 + aux) + "px";
            base.style.top = (y - 10 + 91) + "px";
            base.style.width = (w + 10) + "px";
            base.style.height = (h + 10) + "px";
            remover_xhj();
            w = w + 10;
            h = h + 10;
            //--------------------hoy
            x = x - 10;
            y = y - 10;
            //volver a modificar margenes
        }
    } else if (A == true & B == true & C == false & D == false) {
//superior derecha
//                    console.log("superior derecha");
//No se evalua por que esta arriba -> solo crecer
        base.style.left = (p2A.x + aux) + "px";
        base.style.top = (p2A.y + 91) + "px";
        base.style.width = (w) + "px";
        base.style.height = (h + 10) + "px";
        remover_xhj();
        w = w;
        h = h + 10;
        y = y - 10;
    } else if (A == false & B == true & C == false & D == false) {
//esquina superior derecha
//                    console.log("esquina superior derecha");
        var s1 = new punto(pA.x, p2A.y, w, 10);
        var s2 = new punto(p2A.x, pA.y, 10, h);
        if (isfree(s1) & isfree(s2)) {
//acrecentar el base
            base.style.left = (x + aux) + "px";
            base.style.top = (y - 10 + 91) + "px";
            base.style.width = (w + 10) + "px";
            base.style.height = (h + 10) + "px";
            remover_xhj();
            w = w + 10;
            h = h + 10;
            y = y - 10;
            //volver a modificar margenes
        }
    } else if (A == true & B == false & C == true & D == false) {
//media izquierda
//                    console.log("media izquierda");
        base.style.left = (p2A.x + aux) + "px";
        base.style.top = (p2A.y + 91) + "px";
        base.style.width = (w + 10) + "px";
        base.style.height = (h) + "px";
        remover_xhj();
        w = w + 10;
        h = h;
        x = x - 10;
//                    console.log("antiguo x:" + x + ", nuevo x:" + (p2A.x + aux) + "--->" + (x - 10) + "<------ y p2A.x:" + p2A.x);
//                    x = (p2A.x + aux);
    } else if (A == false & B == true & C == false & D == true) {
//media derecha
//                    console.log("media derecha");
        base.style.left = (pA.x + aux) + "px";
        base.style.top = (pA.y + 91) + "px";
        base.style.width = (w + 10) + "px";
        base.style.height = (h) + "px";
        remover_xhj();
        w = w + 10;
        h = h;
    } else if (A == false & B == false & C == true & D == false) {
//esquina inferior izquierda//corregido
//                    console.log("esquina inferior izquierda");
        var s1 = new punto(p2A.x, pA.y, 10, h);
        var s2 = new punto(pA.x, p2A.y, w, 10);
        if (isfree(s1) & isfree(s2)) {
//acrecentar el base
            base.style.left = (x - 10 + aux) + "px";
            base.style.top = (y + 91) + "px";
            base.style.width = (w + 10) + "px";
            base.style.height = (h + 10) + "px";
            remover_xhj();
            //volver a modificar margenes
            w = w + 10;
            h = h + 10;
            x = x - 10;
//                        y = y + 10;
        }
    } else if (A == false & B == false & C == true & D == true) {
//esquina inferior derecha
//                    console.log("inferior derecha");
        base.style.left = (pA.x + aux) + "px";
        base.style.top = (pA.y + 91) + "px";
        base.style.width = (w) + "px";
        base.style.height = (h + 10) + "px";
        remover_xhj();
        w = w;
        h = h + 10;
    } else if (A == false & B == false & C == false & D == true) {
//esquina inferior derecha
//                    console.log("esquina inferior derecha");
        var s1 = new punto(p2A.x, pA.y, 10, h);
        var s2 = new punto(pA.x, p2A.y, w, 10);
        if (isfree(s1) & isfree(s2)) {
//acrecentar el base
            base.style.left = (x + aux) + "px";
            base.style.top = (y + 91) + "px";
            base.style.width = (w + 10) + "px";
            base.style.height = (h + 10) + "px";
            remover_xhj();
            //volver a modificar margenes
            w = w + 10;
            h = h + 10;
        }
    }
//volver a generar margenes
    crearborde(x, y, w, h, aux);
}

function parseInt2(V) {
    var R = ("" + V).replace("px", "");
    return parseInt(V);
}

var punto = function(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.ki = 0;
    this.setKi = function(v) {
        this.ki = v;
    }
    this.getKi = function() {
        return this.ki;
    }
    this.eval = function(p) {
//                    console.log("evaluando:" + (p.x == x) + ":" + (p.y == y) + "<>[" + p.x + "==" + x + "][" + p.y + "==" + y + "]");
        if (p.x == x & p.y == y)
            return true;
        else
            return false;
    };
    this.toString = function() {
        return "(" + x + "," + y + ")";
    };
    this.inside = function(x1, y1, x2, y2) {
        var r = false;
//                    console.log("evaluacion inside A figura x:" + x1 + ",maxX:" + x2 + ",minY:" + y1 + ", maxY:" + y2 + ", local datos x:" + x + ", y los y:" + y + ", y ancho(w):" + w + " y alto(h):" + h);
        if ((x1 <= x & (x + w) <= x2) & ((y + 10) == y2)) {
//                        console.log("Evaluacion inside superior");
            r = true;
        } else if ((x1 <= x & (x + w) <= x2) & ((y + 0) == y1)) {
//                        console.log("Evaluacion inside inferior");
            r = true;
        } else if (((x + w) == x2) & (y >= y1) & (y + h) <= y2) {
//                        console.log("Evaluacion inside izquierdo");
            r = true;
        } else if (((x + 0) == x1) & (y >= y1) & (y + h) <= y2) {
//                        console.log("Evaluacion inside derecho");
            r = true;
        }
//                    console.log("====evaluacion inside B");
        if (x <= x1 & x2 <= (x + w) & ((y + 10) == y2)) {
//                        console.log("Evaluacion outside superior");
            r = true;
        } else if (x <= x1 & x2 <= (x + w) & ((y + 0) == y1)) {
//                        console.log("Evaluacion outside inferior");
            r = true;
        } else if (y <= y1 & y2 <= (y + h) & (x + 10) == x2) {
//                        console.log("Evaluacion outside izquierdo");
            r = true;
        } else if (y <= y1 & y2 <= (y + h) & x == x1) {
//                        console.log("Evaluacion outside derecho");
            r = true;
        }

        return r;
    };
}

function isfree(P) {
    return true;
}

function comprar() {
    var aux = parseInt((document.getElementById("map_main").getBoundingClientRect().left));
    var base = document.getElementById("mo");
    var x = parseInt2(base.style.left) - aux;
    var y = parseInt2(base.style.top) - 91;
    var w = parseInt2(base.style.width);
    var h = parseInt2(base.style.height);
    remover_xhj();
    $("#mo").css("display", "none");
    $("#mo").css("display", "none");
//    $("#base").css("display", "none");
    $("#map_main0").css("display", "none");
    $("#venta_pro").css("display", "none");
    $("#map_main1").css("display", "block");
    $("#total_pixeles").text((w * h) + "px");
    $("#total_alto").text((w / 10) + " cuadros de alto");
    $("#total_ancho").text((h / 10) + " cuadros de ancho");
    $("#total_costo").text((w * h) + " px * 3.00 = S/." + ((w * h)*3) );
    $("#img_detalle").html(w + " x " + h + " p&iacute;xeles");
    $("#form_titulo").focus();
    $("#img_preview").css("width", w + "px");
    $("#img_preview").css("height", h + "px");
    //----------------------------------------------------------------------
    $("#img_preview2").css("width", w + "px");
    $("#img_preview2").css("height", h + "px");
    //----------------------------------------------------------------
    $("#img_previewx").css("width", w + "px");
    $("#img_previewx").css("height", h + "px");
    $("#img_previewx").css("left", parseInt(((350 - w) / 2)) + "px");
    $("#img_previewx").css("top", parseInt(((200 - h) / 2)) - 2 + "px");
    //----------------------------------------------------------------
    var cx = parseInt(((350 - w) / 2)) - x;
    var cy = parseInt(((200 - h) / 2)) - y;
    $("#img_previewy").css("left", cx + "px");
    $("#img_previewy").css("top", cy + "px");
    $("#img_previewy").css("clip", "rect(" + (0 - cy) + "px, " + ((0 - cx) + 350) + "px, " + ((0 - cy) + 200) + "px, " + (0 - cx) + "px)");
    //----------------------------------------------------------------------
    $("#form_x").attr("value", parseInt(x / 10) + 1);
    $("#form_y").attr("value", parseInt(y / 10) + 1);
    $("#form_width").attr("value", (w / 10));
    $("#form_height").attr("value", (h / 10));
//    $("#form_titulo").focus();
}

function handleFileSelect(evt) {
    try {
        if (evt) {
            if (evt.target) {
                if (evt.target.files) {
                    var files = evt.target.files; // FileList object
                    for (var i = 0, f; f = files[i]; i++) {
                        if (!f.type.match('image.*')) {
//lanzar error
                            continue;
                        }

                        var reader = new FileReader();
                        reader.onload = (function(theFile) {
                            return function(e) {
//                                $("#img_preview").attr("src", "" + e.target.result);
                                $("#img_preview2").attr("src", "" + e.target.result);
                            };
                        })(f);
                        $("#img_name").text("" + escape(f.name));
                        reader.readAsDataURL(f);
                    }
                }
            }
        }

    } catch (e) {
        console.log(e);
    }
}

var valido = false;
var puntobase = null;
var puntobasep1 = null;
var puntobasep2 = null;
var puntobasep3 = null;
var puntobasep4 = null;
var puntodisperso = null;
var valor_real_x = 0;
var valor_real_y = 0;
var valor_aux_x = 0;//parseInt((document.getElementById("map_main0").getBoundingClientRect().left));
var valor_aux_y = 91;
function mousedown(evt, T) {
    valor_aux_x = parseInt((document.getElementById("map_main0").getBoundingClientRect().left));
    console.log("mouse en down: " + T.tagName + "::clientX :" + evt.clientX + "::clientY :" + evt.clientY + "::::::::" + valor_aux_x);

    if (!plantar) {
        valido = true;
        puntobase = new punto(parseInt2(T.style.left), parseInt2(T.style.top), 10, 10);
        puntobasex = new punto(parseInt2(T.style.left), parseInt2(T.style.top), 10, 10);
        puntobasep1 = new punto(parseInt2(T.style.left), parseInt2(T.style.top), 10, 10);
        puntobasep2 = new punto(parseInt2(T.style.left) + 10, parseInt2(T.style.top), 10, 10);
        puntobasep3 = new punto(parseInt2(T.style.left), parseInt2(T.style.top) + 10, 10, 10);
        puntobasep4 = new punto(parseInt2(T.style.left) + 10, parseInt2(T.style.top) + 10, 10, 10);

        plantar = true;
        $("#mo").css("background-color", "#666666");
        $("#mo").css("opacity", "0.8");

        T.style.dispaly = "block"; //Nuevo elemento agregado

    } else {
        //desplantar
        plantar = false;
        valido = false;
        $("#mo").css("width", "10px");
        $("#mo").css("height", "10px");
        $("#mo").css("background-color", "#666666");
        $("#mo").css("opacity", "0.5");
        $("#venta_pro").css("display", "none");
    }
    //crear_ancla
}

function mousewhell(evt, T) {
    console.log("mouse en movimiento: " + evt + "::clientX :" + evt.clientX + "::clientY :" + evt.clientY);
}

function mouseup(evt, T) {
    if (plantar) {
        console.log("mouse en up: " + evt);
        valido = false;
        //pintando el elemento de compra
        if (valido_compra()) {
            var minPX = puntobase.x - valor_aux_x;
            var maxPX = (puntobase.x + parseInt2($("#mo").css("width"))) - valor_aux_x;

            if (minPX + 240 > 1000) {
                $("#venta_pro").css("left", (maxPX + valor_aux_x - 240) + "px");
            } else {
                $("#venta_pro").css("left", (minPX + valor_aux_x) + "px");
            }

            $("#venta_pro").css("top", (puntobase.y + parseInt2($("#mo").css("height")) + 4) + "px");
            $("#venta_pro").css("display", "block");
        } else {
            alert("La selecci\u00F3n no es correcta.");
            plantar = false;
            valido = false;
            $("#mo").css("width", "10px");
            $("#mo").css("height", "10px");
            $("#mo").css("background-color", "#666666");
            $("#mo").css("opacity", "0.5");
            $("#venta_pro").css("display", "none");
        }
    } else {
        $("#venta_pro").css("display", "none");
    }
}

function valido_compra() {
    var m_mo = $("#mo");
    console.log(m_mo.css("left") + ";" + m_mo.css("top") + ";" + m_mo.css("width") + ";" + m_mo.css("height"));
    var n_punto_mo = new punto(parseInt2(m_mo.css("left")) - valor_aux_x, parseInt2(m_mo.css("top")) - valor_aux_y, parseInt2(m_mo.css("width")), parseInt2(m_mo.css("height")));
    console.log(n_punto_mo.x + ";" + n_punto_mo.y + ";" + n_punto_mo.w + ";" + n_punto_mo.h);
    var ta = [];
    ta = document.getElementsByClassName("pixs");
    var interno = false;
//    console.log("evaluando:" + ta.length);
    for (var nw = 0; nw < ta.length; nw++) {
        var shp = ta[nw];
        var shpA = shp.coords.split(",")[0];//x
        var shpB = shp.coords.split(",")[1];//y
        var shpC = shp.coords.split(",")[2];//x1
        var shpD = shp.coords.split(",")[3];//y1
        //--------------------------
        if ((n_punto_mo.x < shpA & shpA < (n_punto_mo.x + n_punto_mo.w)) & (n_punto_mo.y < shpB & shpB < (n_punto_mo.y + n_punto_mo.h))) {
            interno = true;
        } else if ((n_punto_mo.x < shpC & shpC < (n_punto_mo.x + n_punto_mo.w)) & (n_punto_mo.y < shpB & shpB < (n_punto_mo.y + n_punto_mo.h))) {
            interno = true;
        } else if ((n_punto_mo.x < shpA & shpA < (n_punto_mo.x + n_punto_mo.w)) & (n_punto_mo.y < shpD & shpD < (n_punto_mo.y + n_punto_mo.h))) {
            interno = true;
        } else if ((n_punto_mo.x < shpC & shpC < (n_punto_mo.x + n_punto_mo.w)) & (n_punto_mo.y < shpD & shpD < (n_punto_mo.y + n_punto_mo.h))) {
            interno = true;
        }
        if (interno) {
            nw = 100;
        }

        console.log(">" + shp.coords);
    }
    return !interno;
}

function mousemove(evt, T) {
    if (valido) {
        console.log("mouse moving... : " + T.tagName + "::clientX :" + evt.clientX + "::clientY :" + evt.clientY + " , original puntobase.x:" + puntobase.x + ", puntobase.y:" + puntobase.y);
//        puntodisperso = new punto((evt.clientX + document.documentElement.scrollLeft), (window.pageYOffset || document.documentElement.scrollTop), 0, 0);
        puntodisperso = new punto((evt.clientX + document.documentElement.scrollLeft), (evt.clientY + (window.pageYOffset || document.documentElement.scrollTop)), 0, 0);
        if (puntodisperso.x > puntobase.x & puntodisperso.y > puntobase.y) {
            var difx = parseInt(((puntodisperso.x - puntobase.x) + 9) / 10);
            var dify = parseInt(((puntodisperso.y - puntobase.y) + 9) / 10);
//            console.log("difx:" + difx + "digy:" + dify + "[" + difx + "," + dify + "]");
            $("#mo").css("left", puntobasep1.x + "px");
            $("#mo").css("top", puntobasep1.y + "px");
            $("#mo").css("width", (difx * 10) + "px");
            $("#mo").css("height", (dify * 10) + "px");

        } else if (puntodisperso.x < puntobase.x & puntodisperso.y > puntobase.y) {
        } else if (puntodisperso.x > puntobase.x & puntodisperso.y < puntobase.y) {

        } else if (puntodisperso.x < puntobase.x & puntodisperso.y < puntobase.y) {

        }

    }
}


function mouseclick(event, T) {
    if (T.tagName == "AREA" & plantar) {
        plantar = false;
        valido = false;
        $("#mo").css("width", "10px");
        $("#mo").css("height", "10px");
        $("#mo").css("background-color", "#666666");
        $("#mo").css("opacity", "0.5");
        $("#venta_pro").css("display", "none");
    }
}

function mousemove2(evt, T) {
    console.log("te mueves dentro de la imagen");

}

function mousemove3(evt, T) {
    console.log("te mueves dentro del div");

}

function bnt_loadimg_on() {
    $("#bnt_loadimg").css("background-color", "#666666");
//    $("#img_loading").attr("src", "img/compra/cm_flecha_up_hover.png");
}

function bnt_loadimg_off() {
    $("#bnt_loadimg").css("background-color", "#4d4d4d");
//    $("#img_loading").attr("src", "img/compra/cm_flecha_up.png");
}


function test() {

    $("#accordion").each(
            function(Z) {
                var mi = Z;
                var departamento = "";
                var provincia = "";
                var distrito = ""
                var comisaria = "";
                var direccion = "";
                var telefono = "";
                var todo = ""
                //departamento
                for (var G = 0; G < 100; G++) {
                    var vDepartamento = $("#ui-accordion-accordion-header-" + G);

                    if (vDepartamento.length == 1) {
                        departamento = $("#ui-accordion-accordion-header-" + G).text();
                        for (var A = 0; A < 100; A++) {
                            var vProvincia = $("#ui-accordion-ui-accordion-accordion-panel-" + G + "-header-" + A);
                            if (vProvincia.length == 1) {
                                provincia = vProvincia.text();
//Distrito
                                for (var B = 0; B < 100; B++) {
                                    var vDistrito = $("#ui-accordion-ui-accordion-ui-accordion-accordion-panel-" + G + "-panel-" + A + "-header-" + B);
                                    if (vDistrito.length == 1) {
                                        distrito = vDistrito.text();
//comisarias
                                        $("#ui-accordion-ui-accordion-ui-accordion-accordion-panel-" + G + "-panel-" + A + "-panel-" + B).find(".content").each(
                                                function(X) {
                                                    var comi = this.getElementsByClassName("title");
                                                    comisaria = comi[0].innerHTML.replace("COMISARÍA:", "").trim();
                                                    direccion = comi[1].innerHTML.replace("DIRECCIÓN:", "").trim();
                                                    telefono = comi[2].innerHTML.replace("TELÉFONO:", "").trim();
//                                                    console.log(departamento + "\t" + provincia + "\t" + distrito + "\t" + comisaria+"\t"+direccion+"\t"+telefono);
                                                    todo = todo + departamento + "\t" + provincia + "\t" + distrito + "\t" + comisaria + "\t" + direccion + "\t" + telefono + "\n";
                                                }
                                        );
                                    } else {
                                        B = 100;
                                    }
                                }
                            } else {
                                A = 100;
                            }


                        }

                    } else {
                        G = 100;
                    }

                }
                //visualizacion
                $("p").html("<textarea style='width: 100%;height: 100%;'>" + todo + "</textarea>")
            }
    );

}